<template>
  <el-form-item
    :rules="rule"
    class="xm-form-radio"
    :label="label"
    :prop="prop"
    clearable
  >
    <el-radio-group
      v-model="title"
      :placeholder="placeholder"
      class="header-search-select"
      clearable
      :disabled="disabled"
    >
      <template v-for="(item, index) in options" :key="index">
        <el-radio :label="item.label" :value="item.value"></el-radio>
        <slot name="foot"></slot>
      </template>
    </el-radio-group>
    <slot />
  </el-form-item>
</template>
<script>
  import { computed, toRefs } from 'vue'
  export default {
    name: 'XmFRadio',
    props: {
      modelValue: [String, Number, Boolean],
      options: {
        typeof: Array,
        default() {
          return []
        },
      },
      disabled: {
        type: Boolean,
        default() {
          return false
        },
      },
      label: String,
      prop: String,
      quick: Boolean,
    },
    setup(props, context) {
      let title = computed({
        get() {
          return props.modelValue
        },
        set(val) {
          console.log('value =' + JSON.stringify(val))
          context.emit('update:modelValue', val)
          const type = props.options.filter((item) => item.label === val)[0]
            .value
          context.emit('update:value', type)
        },
      })
      const state = {
        rule: [{ required: props.quick, message: '不能为空' }],
      }
      let placeholder =
        '请选择' + props.label ? props.label.replace('：', '') : ''
      return {
        title,
        placeholder,
        ...toRefs(state),
      }
    },
  }
</script>
<style scoped>
  .xm-form-radio {
  }
</style>
